<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    /* 样式用于布局，可根据需要进行调整 */
    body, html {
      height: 100%;
      margin: 0;
      font-family: Arial, sans-serif;
    }
    #menu {
      background-color: #333;
      height: 100%;
      width: 10%;
      float: left;
      box-sizing: border-box;
      color: #fff;
    }
    #content {
      height: 100%;
      width: 80%;
      float: left;
      padding: 20px;
      box-sizing: border-box;
      background-color: #f9f9f9;
    }
    /* 以下样式用于美化菜单和内容 */
    .menu-item {
      padding: 15px 20px;
      cursor: pointer;
      border-bottom: 1px solid #444;
      transition: background-color 0.3s ease;
    }
    .menu-item:hover {
      background-color: #444;
    }
  </style>
</head>
<body>
<div id="menu">
  <div class="menu-item" onclick="loadPage('task-list.html')">任务列表</div>
  <div class="menu-item" onclick="loadPage('model-list.html')">流程列表</div>
  <div class="menu-item" onclick="loadPage('page3.html')">首页</div>
</div>
<div id="content"></div>

<script>
  function loadPage(pageURL) {
    const contentDiv = document.getElementById('content');

    // 创建XMLHttpRequest对象
    const xhr = new XMLHttpRequest();
    xhr.open('GET', pageURL, true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        contentDiv.innerHTML = xhr.responseText;
      }
    };
    xhr.send();
  }
  // 在页面加载完成后默认加载菜单1的内容
  window.onload = function () {
    loadPage('task-list.html');
  };
</script>
</body>
</html>
